<template>
    <ul class="list">
        <li class="item" 
            v-for="item of letters" 
            :key="item"
            :ref="item"
            @touchstart="handelTouchStart"
            @touchmove="handelTouchMove"
            @touchend="handelTouchEnd"
            @click ="handelLetterClick"
        >
            {{item}}
        </li>
    </ul>
</template>

<script>
export default {
     name: 'CityAlphabet',
     props:{
         cities:Object
     },
     computed:{
         letters(){
             const letters = []
             for(let key in this.cities){
                   letters.push(key)
             }
             return letters
         }
     },
     data(){
         return {
             touchStatus: false,
             startY:0,
             timer : null
         }
     },
     updated () {
         this.startY = this.$refs['A'][0].offsetTop
     },
     methods:{
        handelLetterClick (e) {
             this.$emit('change',e.target.innerText)
        },
        handelTouchStart () {
             this.touchStatus = true
        },
        handelTouchMove (e) {
             if(this.touchStatus){
                 //节流解决方案
                 if(this.timer){
                    clearTimeout(this.timer)
                 }
                 this.timer = setTimeout(() => {
                    const touchY = e.touches[0].clientY - 79
                    const index = Math.floor((touchY - this.startY)/20)
                    if(index >= 0 && index< this.letters.length){
                        this.$emit('change',this.letters[index])
                    }
                 }, (16));
                 
                 
             }
        },
        handelTouchEnd () {
            this.touchStatus = false
        }
        
     }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

  .list
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 1.58rem
    right: 0
    bottom: 0
    width: .4rem
    z-index: 4
    background:rgba(255,255,255,.01)
    color: $bgColor
    .item
      line-height: .4rem
      text-align: center
      color: $bgColor
</style>


